<template>
  <el-dialog
    width="500px"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :title="title"
    @callBack="onCallBack"
    @close="onClose"
  >
    <el-upload
      ref="upload"
      action="/api/sysFile/upload"
      :file-list="files"
      :headers="headers"
      :on-success="onSuccess"
    >
      <div class="el-upload__text">将发票模板文件拖到此处，或<em>点击上传</em></div>
    </el-upload>

  </el-dialog>
</template>

<script>
import { getToken } from '@/utils/auth'
import { importInvoice } from '@/api/sysInvoice'

export default {
  data() {
    return {
      headers: {},
      fileList: [],
      dialogVisible: false,
      title: '导入发票结果',
      files: []
    }
  },
  mounted() {
    this.headers = { 'x-token': getToken() }
  },
  methods: {
    onShow() {
      this.dialogVisible = true
    },
    onClose() {
      this.files = []
      this.dialogVisible = false
    },
    onCallBack() {
      this.$emit('onCallBack')
    },
    onSuccess(response, file, fileList) {
      const loading = this.$loading({
        lock: true,
        text: '加载解析中，请稍后....',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      if (response.code === 20000 && response.data) {
        importInvoice(response.data.id).then(res => {
          if (res.code === 20000) {
            loading.close()
            this.$message({
              message: '模板数据导入成功',
              type: 'success'
            })
            this.onClose()
            this.onCallBack()
          }
        })
      }
    }
  }
}
</script>

<style scoped>

/deep/ .el-drawer__header {
  margin-bottom: 0 !important;
}

/deep/ .el-dialog__body {
  height: 150px;
  padding: 10px 10px;
}

/deep/ .el-upload {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 10px;
  border: 1px dashed #d9d9d9;
  background-color: #ffffff;
}

.el-upload__text {
  color: #97a8be;
  font-size: 14px;
  font-weight: 500;
}
</style>
